<template>
    <div>
        ts中的计算属性的类型定义
        <p @click="count++">count:{{ count }}</p>
        <p>计算属性doublecount: {{ double }}</p>

        <hr />
        ts中的事件类型参数设置类型
        <p>
            <input type="text" @change="handleChange($event, 10)">
        </p>
    </div>
</template>

<script lang='ts' setup>
import { ref, computed } from 'vue';
const count = ref(0)



// 定义一个计算属性
// 第一种方式: 使用默认推导类型,不指定其类型
// const double = computed(() => count.value * 2);

// 第二种方式: 指定计算属性的类型
const double = computed<number>(() => count.value * 2)



// 定义一个事件的执行函数
function handleChange(event: Event, n: number) {
    // console.log(event);
    console.log((event.target as HTMLInputElement).value);
    console.log(n);

}

</script>
<style scoped>

</style>